<template>
  <body style="background:#000">
    <div style="height:15vh" />
    <!-- <div class="dashboard-container">
      <div>
        <div>
          <el-row :gutter="20">
            <el-col :span="3">
              <div>
                <div v-for="no in [1, 2, 3, 4]" :key="no">
                  <video
                    v-if="no === 1"
                    :src="mp4_file2"
                    width="100%"
                    height="100%"
                    controls="controls"
                    autoplay="autoplay"
                    :loop="true"
                    :muted="true"
                    style="margin:5px;margin-top:0;"
                  />
                  <video
                    v-else-if="no === 4"
                    :src="mp4_file2"
                    width="100%"
                    height="100%"
                    controls="controls"
                    autoplay="autoplay"
                    :loop="true"
                    :muted="true"
                    style="margin:5px;margin-bottom:0;"
                  />
                  <video
                    v-else
                    :src="mp4_file2"
                    width="100%"
                    height="100%"
                    controls="controls"
                    autoplay="autoplay"
                    :loop="true"
                    :muted="true"
                    style="margin:5px"
                  />
                </div>
              </div>
            </el-col>
            <el-col :span="18">
              <div>
                <div>
                  <el-row :gutter="20">
                    <el-col :span="4">
                      <video
                        :src="mp4_file1"
                        width="100%"
                        height="100%"
                        autoplay="autoplay"
                        :loop="true"
                        :muted="true"
                        controls="controls"
                        style="margin-bottom:10px"
                      />
                    </el-col>
                    <el-col :span="6">
                      //
                      <iframe
                        name="child"
                        src="http://47.105.136.70/test/Warn/demo/#/page_2"
                        frameborder="0"
                        scrolling="no"
                        width="100%"
                        height="100%"
                      >
                        //
                      </iframe>
                    </el-col>

                    <el-col :span="4">
                      <clock
                        size="100px"
                        border="none"
                        bg="radial-gradient(circle, #0c9fe5, #1f7be1, #189f91)"
                        style="color:#fff"
                      />
                    </el-col>
                    <el-col :span="6">
                      <div>
                        //
                        <iframe
                          name="child"
                          src="http://47.105.136.70/test/Warn/demo/#/page_2"
                          width="100%"
                          height="100%"
                          frameborder="0"
                          scrolling="no"
                        >
                          //
                        </iframe>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <video
                        :src="mp4_file1"
                        width="100%"
                        height="100%"
                        controls="controls"
                        autoplay="autoplay"
                        :loop="true"
                        :muted="true"
                      />
                    </el-col>
                  </el-row>
                </div>
                <div>
                  <img :src="tdcsImgUrl" width="100%" height="300" />
                </div>
              </div>
            </el-col>
            <el-col :span="3">
              <div>
                <div v-for="no in [1, 2, 3, 4]" :key="no">
                  <video
                    v-if="no === 1"
                    :src="mp4_file2"
                    width="100%"
                    height="100%"
                    controls="controls"
                    autoplay="autoplay"
                    :loop="true"
                    :muted="true"
                    style="margin:5px;margin-top:0;"
                  />
                  <video
                    v-else-if="no === 4"
                    :src="mp4_file2"
                    width="100%"
                    height="100%"
                    controls="controls"
                    autoplay="autoplay"
                    :loop="true"
                    :muted="true"
                    style="margin:5px;margin-bottom:0;"
                  />
                  <video
                    v-else
                    :src="mp4_file2"
                    width="100%"
                    height="100%"
                    controls="controls"
                    autoplay="autoplay"
                    :loop="true"
                    :muted="true"
                    style="margin:5px"
                  />
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div> -->
  </body>
</template>

<script>
// import Clock from 'vue-clock2'
// import { parseTime } from '@/utils'

// const backImg = require('@/assets/back.png')
// const tdcsImg = require('@/assets/back.jpg')

// const mp4_file1 = require('@/assets/1.mp4')
// const mp4_file2 = require('@/assets/2.mp4')

// console.log('backImg,', backImg)

export default {
  name: 'Dashboard',
  // components: { Clock },
  data() {
    return {
      // mp4_file1: mp4_file1,
      // mp4_file2: mp4_file2,
      // tdcsImgUrl: tdcsImg,
      // backgroundDiv: {
      //   backgroundImage: 'url(' + backImg + ')'
      // }
      // test for easyUI
      // time: '10:40:00'
    }
  },
  computed: {},
  async created() {
    // setInterval(this.clock, 1000)
  },

  mounted() {},

  methods: {
    // async clock() {
    //   const date = new Date()
    //   this.time = parseTime(date, '{h}:{i}:{s}')
    // }
  }
}
</script>
<style>
.dashboard-container {
  /* display: flex; */
  /* width: 100%; */
  /* position: absolute; */
  /* top:15vh; */
  /* padding-top: 15vh; */
  padding: 15px;
  background: #000b1a;
  height: 71vh;
}
</style>
